import ProTable, { ActionType, ProColumns } from "@ant-design/pro-table";
import { SystemLogItem } from "./data";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { useRef } from "react";
import { pageQueryLog } from "./service";

export default () => {

  const actionRef = useRef<ActionType>();

  const columns: ProColumns<SystemLogItem>[] = [
    {
      title: '用户id',
      dataIndex: 'user_id',
    },
    {
      title: '用户名',
      dataIndex: 'user_name',
      search: false
    },
    {
      title: '操作',
      dataIndex: 'operate',
    },
    {
      title: '描述',
      dataIndex: 'description',
      search: false
    },
    {
      title: 'ip地址',
      dataIndex: 'ip',
      search: false
    },
    {
      title: '处理时间',
      dataIndex: 'duration',
      search: false,
      render: (_, record) => { return record.duration + "ms" }
    },
    {
      title: '操作时间',
      dataIndex: 'create_time',
      search: false
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<SystemLogItem>
        dateFormatter="string"
        headerTitle="日志列表"
        columns={columns}
        actionRef={actionRef}
        cardBordered
        editable={{
          type: 'multiple',
        }}
        scroll={{ x: true }}
        request={async (params) => {
          params.page = params.current
          const res = pageQueryLog(params);
          return res;
        }}
        pagination={{
          defaultPageSize: 10,
          size: 'default',
          showQuickJumper: true,
          showSizeChanger: true,
        }}
      />
    </PageHeaderWrapper>
  );
};
